<template>
  <div class="carbonOverview">
    <!-- 资产结构 -->
    <a-row class="Structure_box">
      <a-col :md="16" class="Structure_box_left">
        <a-row>
          <a-col :md="8" class="Structure">
            <div class="title h4">
              当前资产总额 <a-icon type="exclamation-circle" />
            </div>
            <div class="val">{{ quotaOverviewData.total }} 元</div>
          </a-col>
          <a-col :md="8" class="Structure back_img">
            <div class="bg2_box">
              <div class="bg2">
                <div class="title">
                  <a-icon type="credit-card" theme="twoTone" />可用资产总额
                </div>
                <div class="val">{{ quotaOverviewData.availableTotal }} 元</div>
              </div>
            </div>
          </a-col>
          <a-col :md="8" class="Structure back_img">
            <div class="bg3_box">
              <div class="bg3">
                <div class="title">
                  <a-icon type="credit-card" theme="twoTone" />冻结资产总额
                </div>
                <div class="val">{{ quotaOverviewData.freeze }} 元</div>
              </div>
            </div></a-col
          >
          <a-col :md="8" class="Structure backa">
            <div class="back">
              <div class="title">
                <a-icon type="credit-card" theme="twoTone" />资金资产
              </div>
              <div class="val">{{ quotaOverviewData.fund }} 元</div>
            </div></a-col
          >
          <a-col :md="8" class="Structure backa">
            <div class="back">
              <div class="title">
                <a-icon type="credit-card" theme="twoTone" />配额资产
              </div>
              <div class="val">{{ quotaOverviewData.quota }} 吨</div>
            </div></a-col
          >
          <a-col :md="8" class="Structure backa">
            <div class="back">
              <div class="title">
                <a-icon type="credit-card" theme="twoTone" />CCER资产
              </div>
              <div class="val">{{ quotaOverviewData.ccer }}吨</div>
            </div></a-col
          >
        </a-row>
      </a-col>
      <a-col :md="7" :offset="1" class="Structure_box_right">
        <div class="tltle">资产结构</div>
        <div>
          <EchartsPie
            :id="id"
            :data="structureData"
            :widthProp="width"
            :heightProp="height"
          ></EchartsPie>
        </div>
      </a-col>
    </a-row>
    <!-- 累计配额资产净值 -->
    <a-row class="Cumulative_quota">
      <a-col :md="24" class="module">
        <div class="top">
          <div class="title">累计配额资产净值</div>
          <div class="Conditions">
            <a-dropdown>
              <a class="ant-dropdown-link flex_" @click.prevent>
                <div class="title">市场</div>
                <div class="select">{{ defaultText }}</div>
                <a-icon type="down" />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item
                    :key="item.id"
                    v-for="item in exchangeList"
                    @click="dropItemClick(item)"
                    >{{ item.name }}({{ item.productType }})</a-menu-item
                  >
                </a-menu>
              </template>
            </a-dropdown>
            <a-dropdown>
              <a class="ant-dropdown-link flex_" @click.prevent>
                <div class="title">周期</div>
                <div class="select">年度</div>
                <a-icon type="down" />
              </a>
              <template #overlay>
                <a-menu @click="onClick">
                  <a-menu-item key="1">月度</a-menu-item>
                  <a-menu-item key="2">最近7天</a-menu-item>
                  <a-menu-item key="3">年度</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
        <ul class="tab">
          <li @click="changeActiveIdx(1)" :class="[idx == 1 ? 'active' : '']">
            图表
          </li>
          <li @click="changeActiveIdx(2)" :class="[idx == 2 ? 'active' : '']">
            明细
          </li>
        </ul>
        <EchartsLine
          v-if="idx == 1"
          :heightProp="height"
          :widthProp="width"
        ></EchartsLine>

        <div v-else>
          <a-table
            ref="table"
            size="middle"
            :scroll="{ x: true }"
            bordered
            rowKey="id"
            :columns="columns"
            :loading="loading"
            class="j-table-force-nowrap"
            @change="handleTableChange"
          >
          </a-table>
        </div>
      </a-col>
      <!-- 履约周期表 -->
      <a-col :md="24" class="module">
        <div class="top">
          <div class="title">履约周期表</div>
          <div class="Conditions">
            <a-dropdown>
              <a class="ant-dropdown-link flex_" @click.prevent>
                <div class="title">周期</div>
                <div class="select">年度</div>
                <a-icon type="down" />
              </a>
              <template #overlay>
                <a-menu @click="onClick">
                  <a-menu-item key="1">月度</a-menu-item>
                  <a-menu-item key="2">最近7天</a-menu-item>
                  <a-menu-item key="3">年度</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
        <a-row type="flex" justify="center" align="top">
          <a-col :md="4" class="module_one">
            <div class="val">--</div>
            <div class="title">
              <a-icon type="credit-card" theme="twoTone" />履约数量 (t)
            </div></a-col
          >
          <a-col :md="4" class="module_one">
            <div class="val">--</div>
            <div class="title">
              <a-icon type="credit-card" theme="twoTone" /> 配额履约数量 (t)
            </div>
          </a-col>
          <a-col :md="4" class="module_one">
            <div class="val">--</div>
            <div class="title">
              <a-icon type="credit-card" theme="twoTone" /> CCER履约数量
            </div>
          </a-col>
        </a-row>
        <a-table
          ref="table"
          size="middle"
          :scroll="{ x: true }"
          bordered
          rowKey="id"
          :columns="columns1"
          :loading="loading"
          class="j-table-force-nowrap"
          @change="handleTableChange"
        >
        </a-table>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { quotaOverview, exchangeList } from "@/api/assets.js";
import EchartsPie from "@/components/Tools/EchartsPie";
import EchartsLine from "@/components/Tools/EchartsLine";
// import LineChartMultid from '@/components/chart/LineChartMultid'
export default {
  name: "Overview",
  components: {
    EchartsPie,
    EchartsLine,
  },
  data() {
    return {
      exchangeId: "",
      exchangeList: null,
      quotaOverviewData: null,
      defaultText: null,
      id: "structure",
      height: "200px",
      width: "100%",
      structureData: [],
      idx: 2,
      loading: false,
      description: "统计页面",
      columns: [
        {
          title: "时间周期",
          align: "center",
          dataIndex: "name",
        },
        {
          title: "碳余额(吨)",
          align: "center",
          dataIndex: "miaosu",
        },
        {
          title: "最高价(元/吨)",
          align: "center",
          dataIndex: "company",
        },
        {
          title: "最高资产净值(元)",
          align: "center",
          dataIndex: "people",
        },
        {
          title: "均价资产净值(元)",
          align: "center",
          dataIndex: "state",
        },
        {
          title: "收盘碳价(元/吨)",
          align: "center",
          sorter: true,
          dataIndex: "",
        },
        {
          title: "变动金额(元)",
          align: "center",
          sorter: true,
          dataIndex: "",
        },
        {
          title: "资产净值(元)",
          align: "center",
          sorter: true,
          dataIndex: "",
        },
      ],
      columns1: [
        {
          title: "配额/CCER编号",
          align: "center",
          dataIndex: "name",
        },
        {
          title: "履约类型",
          align: "center",
          dataIndex: "miaosu",
        },
        {
          title: "履约数量tCO₂e",
          align: "center",
          dataIndex: "company",
        },
        {
          title: "履约产品",
          align: "center",
          dataIndex: "people",
        },
        {
          title: "归属交易所",
          align: "center",
          dataIndex: "state",
        },
        {
          title: "归属组织",
          align: "center",
          sorter: true,
          dataIndex: "",
        },
        {
          title: "变更时间",
          align: "center",
          sorter: true,
          dataIndex: "",
        },
        {
          title: "记录时间",
          align: "center",
          sorter: true,
          dataIndex: "",
        },
      ],
    };
  },
  created() {
    exchangeList().then((res) => {
      //   console.log(res);
      this.exchangeList = res.result.records;
      this.defaultText =
        this.exchangeList[0].name +
        `(` +
        this.exchangeList[0].productType +
        ")";
      this.exchangeId = this.exchangeList[0].id;
    });
    quotaOverview().then((res) => {
      //   console.log(res);
      this.quotaOverviewData = res.result;
      var structure = [];
      var indexTable = {
        total: "当前资产总额",
        freeze: "冻结资产总额",
        availableTotal: "可用资产总额",
        fund: "资金资产",
      };
      for (let item in this.quotaOverviewData) {
        var name = indexTable[item];
        if (name) {
          structure.push({
            name: name,
            value: this.quotaOverviewData[item],
          });
        }
      }
      this.structureData = structure;
    });
  },
  methods: {
    dropItemClick(item) {
      if (item) {
        this.defaultText = `${item.name} (${item.productType})`;
        this.exchangeId = item.id;
      } else {
        this.defaultText = this.placeholder;
      }
    },

    handleTableChange() {},
    onClick() {},
    changeActiveIdx(idx) {
      this.idx = idx;
    },
  },
};
</script>

<style lang="scss" scoped>
.carbonOverview {
  background: #fff;
  padding: 20px;
  background-size: cover;
  .Structure_box {
    .Structure_box_left {
      border-radius: 6px;
      background: url("@/assets/img/assets/bg_1.png") no-repeat;
      .back_img {
        padding: 0 10px;
        border-radius: 16px;
        .bg2_box {
          background: #eaf6f8;
          border-radius: 16px;

          .bg2 {
            background: url("@/assets/img/assets/bg_2.png");
            background-size: 100% 100%;
            min-height: 80px;
            padding: 10px;
            border-radius: 16px;
            z-index: 99;
          }
        }
        .bg3_box {
          background: #f1f2fc;
          border-radius: 16px;
          .bg3 {
            background: url("@/assets/img/assets/bg_3.png");
            background-size: 100% 100%;
            min-height: 80px;
            border-radius: 16px;
            padding: 10px;
          }
        }
      }

      .Structure {
        padding: 10px;
        min-height: 80px;
        border-radius: 16px;

        .title {
          font-size: 12px;
        }
        .h4 {
          font-size: 16px;
        }
        .val {
          margin-top: 6px;
          font-size: 16px;
        }
        .anticon {
          margin-right: 6px;
        }
      }
      .backa {
        border-radius: 16px;
        padding: 0px 10px;
      }
      .back {
        min-height: 80px;
        background: rgba(233, 237, 241, 0.2);
        border-radius: 16px;
        padding: 10px;
      }
    }
    .Structure_box_right {
      .tltle {
        text-align: left;
        font-size: 16px;
      }
    }
  }
  .Cumulative_quota {
    .module {
      margin-bottom: 30px;
      padding-top: 20px;
      border-top: 1px dashed #ccc;
    }
    .top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .title {
        font-size: 14px;
      }
      .Conditions {
        display: flex;
      }
    }
    .module_one {
      background: rgba(251, 252, 253, 1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 10px;
      padding: 10px 0;
      margin-bottom: 10px;

      .title {
        font-size: 12px;
      }
      .h4 {
        font-size: 16px;
      }
      .val {
        font-size: 22px;
      }
      .anticon {
        margin-right: 6px;
      }
    }
    .tab {
      display: flex;
      margin: 10px 0;
      flex-direction: row;
      padding: 0;
      li {
        list-style: none;
        padding: 6px 14px;
        font-size: 12px;
        margin-right: 6px;
        // background: #0c67ee;
        border-radius: 20px;
        color: #333;
        cursor: pointer;
      }
    }
  }
  .flex_ {
    display: flex;
    width: fit-content;
    flex-direction: row;
    align-items: center;
    margin-left: 20px;
    .title {
      color: #999;
      margin-right: 10px;
    }
    .select {
      color: #000;
      margin-right: 4px;
    }
    i {
      color: #000;
    }
  }
}
.active {
  list-style: none;
  padding: 6px 14px;
  font-size: 12px;
  margin-right: 6px;
  background: #0c67ee;
  border-radius: 20px;
  color: #fff !important;
}
</style>